<template>
   <view>
      <u-navbar title="手机号码认证" autoBack fixed placeholder></u-navbar>
      <view class="content">
         <view class="form">
            <u-form label-width="60px" label-align="right">
               <u-form-item label="手机号">
                  <u-input v-model="phone" placeholder="请输入手机号码" maxlength="11" type="number"></u-input>
               </u-form-item>
               <u-form-item label="验证码">
                  <u-input v-model="code" placeholder="请输入验证码" max="6" type="number">
                     <template slot="suffix">
                        <u-code ref="code" @change="codeChange" uniqueKey="update" :seconds="120" keepRunning></u-code>
                        <u-text :text="tips" size="mini" color="#0aa679" @click="getCode"></u-text>
                     </template>
                  </u-input>
               </u-form-item>
               <u-form-item>
                  <view class="button" @click="handleSubmit()">下一步</view>
               </u-form-item>
            </u-form>
         </view>
      </view>

      <c-loading></c-loading>
   </view>
</template>

<script>
import {
   sendPhoneCode,
   verifyCode
} from '@/api'
export default {
   data() {
      return {
         phone: '',
         code: '',
         tips: '获取验证码',
         canNext: false
      }
   },
   methods: {
      getCode() {
         if((this.phone ?? '') == '') {
            this.$toast.show({
               msg: '请输入手机号'
            })
            return
         }
         const reg = /^1[3456789]\d{9}$/
         if(!reg.test(this.phone)) {
            this.$toast.show({
               msg: '手机号格式错误'
            })
            return
         }
         if(!this.$refs.code.canGetCode) {
            this.$toast.show({
               msg: this.tips
            })
            return
         }
         sendPhoneCode(this.phone).then(res => {
            this.$toast.show({
               msg: res.msg
            })
            if(res.code === 200) {
               this.$refs.code.start()
            }
         })
      },
      codeChange(text) {
         this.tips = text
      },
      handleSubmit() {
         if((this.phone ?? '') == '') {
            this.$toast.show({
               msg: '请输入手机号码'
            })
            return
         }
         if((this.code ?? '') == '') {
            this.$toast.show({
               msg: '请输入验证码'
            })
            return
         }
         const params = {}
         params.phone = this.phone
         params.code = this.code
         verifyCode(params).then(res => {
            if(res.code === 200) {
               uni.navigateTo({
                  url: '/pages/resetPassword'
               })
            }else {
               this.$toast.show({
                  msg: res.msg
               })
            }
         })
      }
   }
}
</script>

<style lang="scss" scoped>
.form {
   width: auto;
   margin: 20px;
   background-color: #ffffff;
   border-radius: 8px;
   padding: 20px 10px;

   .button {
      width: calc(100% - 40px);
      padding: 5px 10px;
      margin: 10px 20px;
      background-color: $primary-theme-color;
      border-radius: 4px;
      color: #ffffff;
      text-align: center;
   }
}
</style>
